<template>
  <div>
    <app-container>
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">拷贝</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </app-container>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '原利率代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542607336000_56274' }, 'key': '1542607336000_56274', 'model': 'input_1542607336000_56274', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '原利率名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542607346000_40072' }, 'key': '1542607346000_40072', 'model': 'input_1542607346000_40072', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'select', 'name': '原利率代码类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'OriginalInterestRateCodeType' }, 'key': '1542607354000_8', 'model': 'select_1542607354000_8', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '新利率代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542607416000_21709' }, 'key': '1542607416000_21709', 'model': 'input_1542607416000_21709', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542607332000_77365' }, 'key': '1542607332000_77365', 'model': 'grid_1542607332000_77365', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '新利率名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542607426000_31707' }, 'key': '1542607426000_31707', 'model': 'input_1542607426000_31707', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 6, 'list': [] }, { 'span': 6, 'list': [] }, { 'span': 6, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542607421000_47512' }, 'key': '1542607421000_47512', 'model': 'grid_1542607421000_47512', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': false }},
      editData: {},
      values: {},
      remoteFuncs: {

        OriginalInterestRateCodeType(resolve) {
          // 原利率代码类型 select_1542607354000_8
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('原利率代码类型').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
